<template>
	<div>
		<mj-title type="h2" title="Code 代码语法高亮插件"></mj-title>
		<div class="page-desc">仅作为推荐插件，非插件内置功能。如需使用，请单独调用或安装。</div>

		<mj-title type="h5" title="Prism"></mj-title>
		<ul class="page-list">
			<li>PrismJS 是一款轻量级、可扩展的语法高亮显示工具，在支持现代 Web 标准基础下增加了更多可选的风格插件。</li>
			<li>CDN方式调用，在App.vue 中添加，路由切换时候重新渲染插件</li>
		</ul>
		<pre>
			<code class="language-js line-numbers">
				App.vue
				&lt;script>
				import '/public/prism/prism.js'
				import '/public/prism/prism.css'
				export default {
				  name: 'App',
				  watch: {
				      '$route':'getPath',
				  },
				  methods: {
				    getPath(){
				      this.$nextTick(()=> {
				          Prism.highlightAll() //重新渲染代码高亮插件,全局
				      })
				    }
				  }
				}
				&lt;/script>

				使用：
				&lt;template>
					&lt;pre>
						&lt;code class="language-js line-numbers">
						……
						&lt;/code>
					&lt;/pre>
				&lt;/template>
			</code>
		</pre>
	</div>
</template>
